<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="../css/top5.css" />
		<link type="text/css" rel="stylesheet" href="../css/setter.css" />
		
		<script type="text/javascript" src="../js/model/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/model/bootstrap.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/model/reset_font.js"  ></script>
		<script type="text/javascript" src="../js/setter.js"></script>
		
		<title>优当借书</title>
		
		<script>
			$(function(){
				$("body").css("opacity",1);
			})
			
		</script>
	</head>
	<body style="opacity: 0;">
		<div class="top">
			<a href="login.html" class="goback">
				<img src="../images/icons/goback2.png">
			</a>
			<span>我的资料</span>
		</div>
		<div class="main">
			<div class="item item0">
				<a href="#">
					<div class="itemLeft">
						我的头像
					</div>
					<div class="itemRight">
						<div id="preview">
							<img src="../images/setter/avatar.png" class="avatar" />
						</div>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			
			<div class="item">
				<a href="nickname.html">
					<div class="itemLeft">
						昵称
					</div>
					<div class="itemRight">
						<span class="un">未填写<span>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="item">
				<a href="grade.html">
					<div class="itemLeft">
						孩子年级
					</div>
					<div class="itemRight">
						<span class="un">未知<span>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="item gender">
				<a href="#">
					<div class="itemLeft">
						性别
					</div>
					<div class="itemRight">
						<span class="sex">未知<span>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="item hobby">
				<a href="hobby.html">
					<div class="itemLeft">
						兴趣爱好
					</div>
					<div class="itemRight">
						<span class="un">未知<span>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="item relationship">
				<a href="#">
					<div class="itemLeft">
						您与孩子的关系
					</div>
					<div class="itemRight ">
						<span class="un">未知<span>
						<input type="hidden" class="guanxi" value="爷爷">
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<div class="itemLeft">
						常用地址
					</div>
					<div class="itemRight">
						<span class="un">添加/修改<span>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="clear"></div>
			<div class="security">安全设置</div>
			<div class="item">
				<a href="forgetkey.html">
					<div class="itemLeft">
						登录密码
					</div>
					<div class="itemRight">
						<span class="un">修改<span>
						<img src="../images/setter/arrow_r.png" class="arrow_r" />
					</div>
				</a>
			</div>
			<div class="exit">
				<a href="javascript:;" >退出当前账号</a>
			</div>
		</div>
		
		<!--弹出面板1 拍照 开始-->
		<div class="grey grey1">
			<div class="whiteboardTop">
				<div class="paizhao">拍照
					<input type="file" accept="image/*"  capture="camera" onchange="preview(this)" class="myfile1"/>
				</div>
				
				<div class="xiangce">去相册选择
				<input type="file" accept="image/png,image/jpg"  onchange="preview(this)" class="myfile2"/></div>
				
			</div>
			<div class="whiteboardBot">
				<div class="cancel">取消</div>
			</div>
			

		</div>
		<!--弹出面板1 结束-->
		
		<!--弹出面板2 性别 开始-->
		<div class="grey grey2" style="display: none;">
			<div class="whiteboardTop">
				<div class="male">男</div>
				<div class="female">女</div>
			</div>
			<div class="whiteboardBot">
				<div class="cancel">取消</div>
			</div>
			
		</div>
		<!--弹出面板2 结束-->
		
		<!--弹出面板3 关系 开始-->
		<div class="grey grey3" >
			<div class="whiteboard">
				<ul class="relation">
					<input type="hidden" value="0" class="myoption"  />
					<li class="">
						<span class="check "></span>
						<span class="options">爸爸</span>
					</li>
					<li>
						<span class="check "></span>
						<span class="options">妈妈</span>
					</li>
					<li>
						<span class="check "></span>
						<span class="options">爷爷</span>
					</li>
					<li>
						<span class="check "></span>
						<span class="options">奶奶</span>
					</li>
					<li>
						<span class="check "></span>
						<span class="options">外公</span>
					</li>
					<li>
						<span class="check "></span>
						<span class="options">外婆</span>
					</li>
					<li>
						<span class="check "></span>
						<span class="options">亲友</span>
					</li>
					
				</ul>
				<div class="caozuo">
					<input type="button" class="cancel3" name="cancel3" value="取消"/>
					<input type="button" class="confirm3" name="comfirm3" value="确定" />
				</div>
			</div>
		</div>
		<!--弹出面板3 关系 结束-->
		
		<!--弹出菜单4  开始-->
		
		<div class="grey grey4 " style="display: none;">
			<div class="whiteboard">
				<div class="wb_top">
					您确定要退出登录吗？
				</div>
				<div class="wb_bot">
					<button class="cancel4">取消</button>
					<button class="comfirm4">确认</button>
				</div>
			</div>
		</div>
		<!--弹出菜单4  结束-->
		
		<script type="text/javascript">
	    function preview(file) {
	        var prevDiv = document.getElementById('preview');
	        if (file.files && file.files[0]) {
	            var reader = new FileReader();
	            reader.onload = function(evt) {
	            	console.log(evt.target.result);
	                prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
	            }
	            reader.readAsDataURL(file.files[0]);
	        } else {
	            prevDiv.innerHTML = '<div class="avatar"  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
	        }
	        $(".grey1").hide();
	    }
		</script>
	</body>
</html>
